<template>
  <div class="l-body">
    <!-- 左边导航栏 -->
    <div class="nav">
      <div class="f-ding">
        <img src="../../static/img/后台Logo.png" alt="" width="100%" height="62px">
      </div>
      <el-row class="tac">
        <el-menu
          router
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color=" rgb(41, 45, 77)"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="/home/control">
            <i class="el-icon-menu"></i>
            <span slot="title">控制台</span>
          </el-menu-item>
          <!-- 管理员 -->
          <el-submenu index="0">
            <template slot="title">
              <a-icon type="contacts" style="font-size: 18px" />
              <span class="f-move">管理员</span>
            </template>
            <el-menu-item index="/home/houtai">
              <span class="f-elmu">后台管理者</span>
            </el-menu-item>

            <el-menu-item index="/home/role">角色管理</el-menu-item>
            <el-menu-item index="/home/quanxian">查看权限信息</el-menu-item>
          </el-submenu>
          <!-- 人员实名管理 -->
          <el-submenu index="1">
            <template slot="title">
              <a-icon type="team" style="font-size: 18px" />
              <span class="f-move">人员实名管理</span>
            </template>
            <el-menu-item index="/home/rygl">
              <span class="f-elmu">人员管理</span>
            </el-menu-item>
            <el-menu-item index="/home/xmbz">项目班组</el-menu-item>
            <el-menu-item index="/home/peixun">培训管理</el-menu-item>
            <el-menu-item index="/home/zjdq">证件到期</el-menu-item>
            <el-menu-item index="/home/kaoqinxinxi">考勤信息</el-menu-item>
            <el-menu-item index="/home/laodongli">劳动力计划投入</el-menu-item>
          </el-submenu>
          <!-- 机械设备管理 -->
          <el-submenu index="7">
            <template slot="title">
              <a-icon type="setting" style="font-size: 18px" />
              <span class="f-move">机械设备管理</span>
            </template>
            <el-menu-item index="/home/sbjc">设备监测</el-menu-item>
            <el-menu-item index="/home/meijin">门禁设备</el-menu-item>
            <el-menu-item index="/home/jiankong">监控设备</el-menu-item>
            <el-menu-item index="/home/dianli">电力监测设备</el-menu-item>
            <el-menu-item index="/home/td">塔吊设备</el-menu-item>
            <el-menu-item index="/home/cheliang">车辆识别设备</el-menu-item>
            <el-menu-item index="/home/jk">基坑设备</el-menu-item>
            <el-menu-item index="/home/hjjc">环境监测</el-menu-item>
          </el-submenu>
          <!-- 现场车辆管理 -->
          <el-submenu index="11-3">
            <template slot="title">
              <!-- <i class="el-icon-location"></i> -->
              <a-icon type="car" style="font-size: 18px" />
              <span class="f-move">现场车辆管理</span>
            </template>
            <el-menu-item index="/home/cljk">车辆监控系统</el-menu-item>
            <el-menu-item index="/home/clxx">车辆信息</el-menu-item>
          </el-submenu>
          <el-menu-item index="/home/tadiao">
           <a-icon type="box-plot" style="font-size: 18px" />
            <span slot="title" class="f-move">塔吊监测系统</span>
          </el-menu-item>
          <el-menu-item index="/home/huanjing">
            <a-icon type="control" style="font-size: 18px" />
            <span slot="title" class="f-move">环境监测系统</span>
          </el-menu-item>
          <!-- 任务信息管理 -->
          <el-submenu index="11-11">
            <template slot="title">
              <!-- <i class="el-icon-location"></i> -->
              <a-icon type="file-protect" style="font-size: 18px" />
              <span class="f-move">任务信息管理</span>
            </template>
            <el-menu-item index="/home/xiaoxi">消息管理</el-menu-item>
              <el-menu-item index="/home/jilv">报警记录</el-menu-item>
          </el-submenu>
         <!-- 项目档案管理 -->
          <el-submenu index="8">
            <template slot="title">
              <a-icon type="audit" style="font-size: 18px" />
              <span slot="title" class="f-move">项目档案管理</span>
            </template>
            <el-menu-item index="/home/xinxi">项目信息</el-menu-item>
            <el-menu-item index="/home/da">项目档案</el-menu-item>
            <el-menu-item index="/home/dw">参建单位</el-menu-item>
            <el-menu-item index="/home/jd">项目节点</el-menu-item>
            <el-menu-item index="/home/ld">项目亮点</el-menu-item>
            <el-menu-item index="/home/xcp">项目宣传片</el-menu-item>
            <el-menu-item index="/home/pmt">项目平面图</el-menu-item>
            <el-menu-item index="/home/xgt">项目效果图</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-row>
    </div>
    <!-- body右边部分 -->
    <div class="l-right">
      <!-- body右边部分头部 -->
      <div class="l-head">
        <div class="l-head-left">工地建设示例项目</div>
        <div class="l-head-right">
          <div class="l-right-kuangjia">
            <!-- <div class="line"></div> -->
            <el-menu
              router
              :default-active="$route.path"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="rgb(41, 45, 77)"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-menu-item index="/home/xtsz">系统设置</el-menu-item>
              <!-- <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
              </el-submenu>-->
              <!-- <el-menu-item index="/home/xiaoxixinxi">消息信息</el-menu-item> -->
            </el-menu>
          </div>
          <div class="l-head-right-1">
            <button class="l-daping-btn" @click="jiankong()">监控大屏</button>
          </div>
          <div class="l-head-right-img">
            <el-dropdown>
              <img :src="this.headerImg_url" alt class="el-dropdown-link" />
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="person()">个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="out()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <div class="f-loginName">{{this.people_name}}</div>
        </div>
      </div>
      <!-- body中间的子路由-->
      <div class="f-zilu">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../api";
export default {
  data() {
    return {
      collapsed: false,
      screenWidth: document.body.clientWidth, // 屏幕宽
      screeHeight: document.body.clientHeight, // 屏幕高

      activeIndex: "1",
      activeIndex2: "1",

      headerImg_url:"",
      people_name:"",
    
    };
  },
  mounted() {
    //刷新跳转到home页面
    // this.$router.push("../home");
    console.log(this.screenWidth);
    console.log(this.screeHeight);
    this.people_name=sessionStorage.getItem("people_name")
    this.headerImg_url=sessionStorage.getItem("people_url")
   
    console.log("头像",this.headerImg_url)
  },
  methods: {
    // 退出登录
    out() {
      var userToken = sessionStorage.getItem("userToken");
      console.log(sessionStorage.getItem("userToken"));
      // sessionStorage.removeItem("userToken");
      // this.$router.push({
      //   name: "Login",
      // });
      http.loginOut(sessionStorage.getItem("userToken")).then((res) => {
        console.log(res);
        sessionStorage.removeItem("userToken");
        this.$router.push({
          name: "Login",
        });
      });
    },
    // 个人中心
    person() {
      this.$router.push({
        name: "个人中心",
      });
    },
    // 跳转监控大屏
    jiankong() {
      this.$router.push({
        name: "监控大屏",
      });
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 路由跳转
    toIndex(index) {
      let nameIndex = [
        "控制台",
        "人员实名管理",
        "机械设备管理",
        "现场车辆管理",
        "塔吊监测系统",
        "环境监测系统",
        "任务信息管理",
        "项目档案管理",
        "系统设置",
        "消息信息",
        "监控大屏",
      ];
      this.$router
        .push({
          name: nameIndex[index],
        })
        .catch((err) => err);
    },
  },
};
</script>
<style scoped>
.f-loginName{
  margin-left: -50px;
  margin-top: -10px;
}
.l-body {
  /* width: 1536px; */
  display: flex;
  justify-content: left;
  /* background-color: gainsboro; */
}

.nav {
  width: 15%;
  height: 720px;
  background: rgb(41, 45, 77);
  overflow: hidden;
  overflow-y: scroll;
}
/* 滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  /* background: rgb(240, 240, 240); */
  /* background-color: rgb(160, 160, 160); */
}



.l-right {
  width: 85%;
  height: 720px;
  background-color: rgb(241, 241, 241);
  /* margin-left: 10px; */
  /* background: orange; */
}
/* 顶部导航 */
.l-head {
  width: 100%;
  height: 62px;
  overflow: hidden;

  /* color: black; */
  /* background-color: rgb(236, 236, 236); */
  color: white;
  background: rgb(41, 45, 77);
  /* background: rgb(20, 27, 79); */
}
.l-head-left {
  width: 112px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  float: left;
  margin-left: 20px;
}
.l-head-right {
  width: 440px;
  height: 70px;
  /* background-color: lightblue; */
  float: right;
  /* background: red; */
  display: flex;

  justify-content: space-around;
  align-items: center;
}
.l-right-kuangjia {
  margin-top: -10px;
  margin-left: 10px;
  height: 55px;
}
.l-daping-btn {
  width: 84px;
  height: 28px;
  margin-top: -10px;
  background: rgb(80, 93, 196);
  border: none;
  border-radius: 15px;
  color: white;
  outline: none;
  cursor: pointer;
}
.l-head-right-1{

}
.l-head-right-img {
  margin-left: -30px;
  /* width: 32px;
  height: 32px; */
  /* background-color: aquamarine; */
}

.l-head-right-img img {
  width: 32px;
  height: 32px;
  margin-top: -10px;
  border-radius: 50%;
  cursor: pointer;
}
.lww-name {
  width: 200px;
  height: 60px;
  font-size: 22px;
  color: blue;
}
.ant-menu-item {
  margin-top: 10px;
  font-size: 16px;
}

.f-zilu {
  width: 100%;
  background-color: rgb(241, 241, 241);
  overflow: hidden;
}
/* 退出登录  个人中心 */
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
/* 框架顶部 */

.f-ding {
  width: 100%;
  height: 62px;
  opacity: 0.8;
   /* position: relative;
   z-index: 999; */
  /* background: rgb(41, 45, 77); */
}
.f-move {
  margin-left: 20px;
}
.el-menu-item.is-active {
  background: rgb(113, 118, 156, 0.7) !important;
  /* opacity: 0.7; */
}
/* .el-submenu__title >>>.el-menu-item is-active :hover{
    background: rgb(113, 118, 156,0.7)  !important;221q
/* .el-menu-item >>> .is-active :hover{
   background: rgb(113, 118, 156,0.7)  !important;
} 
el-submenu__title */
.el-submenu >>> .el-submenu__title:hover {
  background: rgb(113, 118, 156, 0.7) !important;
}
.el-menu-item:hover {
  background: rgb(113, 118, 156, 0.7) !important;
}
</style>